/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import type {FC} from 'react';
import { useContext} from 'react';
import {View, TouchableOpacity, Image} from 'react-native';
import type {FlexStyle, ImageSourcePropType} from 'react-native';
import {useBreakpointValue, useHeightBreakpointValue} from '@hadss/react_native_adaptive_layout';
import Context from '../../Context';

const path_x1 = require('../../../../../assets/pic/zoom_1.png');
const path_x2 = require('../../../../../assets/pic/zoom_2.png');
/** options props */
type OptionsProps = {
  /** 返回cb */
  onPress?: () => void;
};

type Option = {
  id: string;
  path?: ImageSourcePropType;
  onPress?: () => void;
};

/**
 * @description 相机顶部操作选项
 * @returns
 */
const Options: FC<OptionsProps> = props => {
  const {zoom, setZoom} = useContext(Context);
  /** 基础options选项 */
  const baseOptions: Option[] = [
    {
      id: 'ic_camera_masterai_y',
      path: path_x2,
      onPress : () => {
          setZoom(2);
      }
    },
    {
      id: 'ic_camera_flash_hivision',
      path: path_x1,
      onPress : () => {
          setZoom(1);
      }
    },
  ];

  const isSmall = useHeightBreakpointValue<boolean>({
    base: false,
    sm: true,
    md: true,
    lg: false,
  });
  /** 容器基础样式， */
  const baseStyle = useBreakpointValue<FlexStyle>({
    base: isSmall
      ? {
          flexDirection: 'row-reverse',
          justifyContent: 'space-between',
          paddingHorizontal: 16,
          position: 'absolute',
          top: 16,
          zIndex: 5,
          width: '100%',
        }
      : {
          flexDirection: 'row-reverse',
          marginBottom: 12,
          justifyContent: 'space-between',
          paddingHorizontal: 23,
        },
    sm: {
      flexDirection: 'row-reverse',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      position: 'absolute',
      top: isSmall ? 16 : 36,
      zIndex: 5,
      width: '100%',
    },
  });
  const list = useBreakpointValue<Option[]>({
    base: [
      {id: 'close', path: require('../../../../../assets/pic/ic_camera_masterai_close.svg'), onPress: props?.onPress},
      ...baseOptions,
    ],
  });
  return (
    <View style={{...baseStyle}}>
      {list?.map(item => (
        <TouchableOpacity key={item.id} onPress={item?.onPress}>
          <Image style={{width: 24, height: 24}} source={item.path} />
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default Options;
